<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 通用工具栏 -->
        <el-row type="flex" justify="space-between" align="middle" style="padding: 5px; height: 40px; width: 100%">
          <!-- 左边检索区域 -->
          <el-col :span="21">
            <el-row type="flex" >
              <!-- 标签筛选 -->
              <el-col>
                <span 
                  style="font-size: 14px; font-weight: bold; margin: 10px 18px"
                >关键字</span>
                <el-input 
                  v-model="params.keyword"
                  placeholder="根据文章标题搜索"
                  style="width: 200px">
                </el-input>
              </el-col>
              <!-- 状态筛选 -->
              <el-col>
                <span 
                  style="font-size: 14px; font-weight: bold; margin-right: 10px">状态</span>
                <!-- 下拉框 -->
                  <el-select v-model="params.state" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-col>
              <!-- 按钮 -->
              <el-col >
                <el-button size="small" @click="clear">清除</el-button>
                <el-button type="primary" size="small" @click="search">搜索</el-button>
              </el-col>
            </el-row>
          </el-col>
          <!-- 右边新增按钮 -->
          <el-col :span="3" style="text-align: right;">
            <el-button type="success" icon="el-icon-edit" size="small" @click="showNewArticleDialog">
              新增技巧
            </el-button>
          </el-col>
        </el-row>
        <!-- 小tips -->
        <el-row>
          <el-col style="background: #f4f4f5; padding: 8px 16px; margin: 15px 0" >
            <i class="el-icon-info" style="color: #909399;">
              <span style="font-size: 14px; margin-left: 8px;">数据一共{{this.total}}条</span>
            </i>
          </el-col>
        </el-row>
        <!-- 表格区域 -->
        <el-table
          :data="articlesList" style="width: 100%;">
          <el-table-column label="序号" type="index" width="75" />
          <el-table-column prop="title" label="文章标题" width="380">
            <template #default="{ row }">
              <span>
                {{ row.title }}
                <el-button type="text" @click="videoDialogOpen(row.videoURL)">
                  <i v-if="row.videoURL" class="el-icon-film"></i>
                </el-button>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="80" />
          <el-table-column prop="username" label="录入人" width="80" />
          <el-table-column prop="createTime" label="录入时间" width="90">
            <template #default="{ row }">
              {{ formatDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ stateMap[row.state] }}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="state"  width="200">
            <template #default="{ row }">
              <el-button type="text" @click="showPreviewDialog(row.id)">预览</el-button>
              <el-button type="text" @click="toggleState(row)">{{row.state === 1 ? '禁用' : '启用'}}</el-button>
              <el-button type="text" 
                @click="showNewArticleDialogEdit(row.id)" 
                :disabled="row.state === 0"
              >修改</el-button>
              <el-button type="text" 
                :disabled="row.state === 0"
                @click="delArt(row.id)"
              >删除</el-button>
          </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          background
          style="text-align: right">
        </el-pagination>
      </el-card>
    </div>
    <!-- Video组件 -->
    <!-- 外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗 -->
    <div class="mask" v-if="videoOpen">
      <!-- 关闭按钮 -->
      <div class="video-close-icon" v-if="videoOpen" @click="masksCloseFun">
        <el-button type="text" class="el-icon-circle-close" style="font-size: 50px; color: #fff;"></el-button>
      </div>
      <!-- 弹窗 -->
      <div class="videomasks" v-if="videoOpen"> 
        <video :src="videoURL" controls="controls" autoplay width="100%" height="100%">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <!-- 预览文章弹框组件 -->
    <articles-preview
    :preVisible="previewDialogVisible"
    @dialog-close="dialogClose"
    :preform="articleDetailForm"
    :username="articleusername">
    </articles-preview>
    <!-- 新增文章弹框组件 -->
    <articles-add
    ref="addDialogRef"
    :newVisible="newArtDialogVisible"
    @newArt-dialog-close="newArtDialogClose"
    :params="params"
    @fetch-articles-list="fetchArticlesList"
    @showPreviewDialog="showPreviewDialog">
    </articles-add>
  </div>
</template>

<script>
import { list, detail, changeState, remove, update, add } from  '@/api/hmmm/articles'
import dayjs from 'dayjs'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
import ArticlesAdd from '@/module-hmmm/components/articles-add'

export default {
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  data() {
    return {
      input: '',
      options: [
        {
          value: '1',
          label: '启用'
        }, {
          value: '0',
          label: '禁用'
        }
      ],
      articlesList: [],
      params: {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
        keyword: '', // 关键字
        state: null // 状态 1：开启 0：屏蔽
      },
      // 总条数
      total: 0,
      // 状态枚举
      stateMap: {
        1: '已启用',
        0: '已禁用'
      },
      // 视频弹框 显示与隐藏
      videoDialogVisible: false,
      // 预览弹框 显示与隐藏
      previewDialogVisible: false,
      articleId: '',
      // 文章详细信息
      articleDetailForm: {},
      // 当前点击的文章作者
      articleusername: '',
      // 新增文章弹框
      newArtDialogVisible: false,
      videoURL: '',
      // 视频窗口
      videoOpen: false,
    }
  },
  created() {
    this.fetchArticlesList()
  },
  methods: {
    // 获取表格数据
    async fetchArticlesList() {
      const { data } = await list(this.params)
      // 列表数据
      this.articlesList = data.items
      // 总条数
      this.total = data.counts 
    },
    // 切换 开启禁用
    async toggleState(data) {
      data.state = data.state === 1 ? 0 : 1
      let param = {
        state :data.state,
        id :data.id
      }
      await changeState(param)
      this.$message.success('操作成功')
    },
    // 搜索筛选文章
    search() {
      // console.log(this.params.keyWord);
      this.fetchArticlesList()
    },
    // 清除搜索框
    clear() {
      this.params = {
        page: 1, // 当前页数
        pagesize: 11, // 页尺寸
        keyword: '', // 关键字
        state: null // 状态 1：开启 0：屏蔽
      }
    },
    // 每页条数改变触发
    handleSizeChange(pagesize) {
      this.params.pagesize = pagesize
      this.fetchArticlesList()
    },
    // 当前页数改变触发
    handleCurrentChange(page) {
      this.params.page = page
      this.fetchArticlesList()
    },
    // 视频播放打开
    videoDialogOpen(videoURL) {
      this.videoURL = videoURL
      this.videoOpen = true
    },
    // 视频播放关闭
    masksCloseFun() {
      this.videoOpen = false
    },
    // 时间格式转换
    formatDate(date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 显示预览弹窗
    showPreviewDialog(id) {
      this.previewDialogVisible = true
      this.fetchDetailArticle(id)
      // this.articleId = id
    },
    // 获取文章详细信息
    async fetchDetailArticle(id) {
      const {data} = await detail({id})
      this.articleDetailForm = data
    },
    // 关闭预览弹框
    dialogClose() {
      this.previewDialogVisible = false
    },
    // 显示新增文章弹框
    showNewArticleDialog() {
      this.newArtDialogVisible = true
    },
    // 关闭新增文章弹框
    newArtDialogClose() {
      this.newArtDialogVisible = false
    },
    // 开启编辑文章弹框
    showNewArticleDialogEdit(id) {
      this.newArtDialogVisible = true
      // const res = this.fetchDetailArticle(id)
      // this.editFrom = res
      this.$refs.addDialogRef.fetchDetailArticle(id)
    },
    // 删除文章
    async delArt(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({id})
        this.fetchArticlesList()
        this.$message.success('删除文章成功')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}

// 视频播放
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
  // 会使纸盒子也半透明
  // background-color: #000000;
  // opacity: 0.6;
  background:rgba(0,0,0,0.6)
}
/* 内容层 z-index要比遮罩大，否则会被遮盖 */
.videomasks {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -220px;
  width: 800px;
  height: 500px;
  background-color: #000;
  z-index: 1002;
}
// 关闭视频的按钮
.video-close-icon {
  position: fixed;
  top: 30px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  z-index: 1002;
}
</style>
